<template>
  <div class="team-detail detail_page_layer">
    <div class="header">
      <div class="header-content-box">
        <div class="header-left">
          <div class="title">{{teamDetailCon.name?teamDetailCon.name:"__"}}</div>
          <div class="desc">{{teamDetailCon.introduction?teamDetailCon.introduction:"__"}}</div>
        </div>
        <div class="header-right">
          <div class="action-box">
            <div class="action">
              <span @click="setUpTeamFun" v-if="obtainStatebtn"><i class="icon-cfg"></i>设置</span>
              <span @click="exitTeamFun" v-else><i class="icon-tcg"></i>退出团队</span>
            </div>
          </div>
        </div>
      </div>
      <ul class="nav-list">
        <li class="main-nav-list nav-left clearfix">
          <ul class="main-nav-list-container">
            <li class="nav-item link-item" :class="{'active': activeTab === 1}" @click="toggleActive(1)">
              <i class="icon icon-member"></i>团队成员
            </li>
            <li class="nav-item link-item" :class="{'active': activeTab === 2}" @click="toggleActive(2)">
              <i class="icon icon-count"></i>数据统计
            </li>
          </ul>
        </li>
        <li class="main-nav-list nav-right" v-if="obtainStatebtn">
          <div class="header-button" @click="invitationMemberBounced=true">
            <el-button size="medium" type="primary"><i class="icon-invite el-icon--left"></i>邀请成员</el-button>
          </div>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
    <el-dialog
      width="619px"
      custom-class="team-member-bounced-wrap"
      :visible.sync="invitationMemberBounced"
      @close="closeBouncedFun"
      center>
      <div class="team-member-bounced">
        <h4>邀请加入团队</h4>
        <div class="member-bounced-con">
          <el-form
            :model="memberemailform"
            :rules="memberemailrules"
            label-width="0"
            ref="memberemailform"
            @submit.native.prevent>
            <el-form-item prop="email" class="member-bounced-con-box">
              <el-input
                v-model="memberemailform.email"
                class="member-bounced-email"
                placeholder="输入邮箱号进行邀请"></el-input>
              <!-- <el-button type="primary" class="member-bounced-search" @click="addPersonnelFun">搜索</el-button> -->
              <div class="information-email-btn" @click="addPersonnelFun">搜索</div>
            </el-form-item>
            <ul class="information-email-back" v-if="accordingEnd">
              <li class="back-item">
                <div class="back-item-portrait">
                  <img :src="memberIcoSeparate" />
                </div>
                <p class="back-item-con"><span>{{memberNameSeparate}}</span>{{memberEmailSeparate}}</p>
                <div class="back-item-add" @click="addMembersIDfun">
                  <img src="@/common/image/team-add-people.png" alt="">
                </div>
              </li>
            </ul>
          </el-form>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTeamDetail, sendTeamMemberEmail, getUserInfoByEmail, quitTeam } from '@/api/team_list'
import { mapGetters } from 'vuex'
import qs from 'qs'

export default {
  inject: ['reload'],
  data () {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
      this.isEmailBorderBtn = false
      setTimeout(() => {
        if (mailReg.test(value)) {
          this.inputTeamAddEmail = true
          callback()
        } else if (value === '') {
          this.isEmailBorderBtn = true
          this.inputTeamAddEmail = false
          callback()
        } else {
          this.inputTeamAddEmail = false
          callback(new Error('邮箱格式不正确'))
        }
      }, 100)
    }
    return {
      // 弹框开关
      invitationMemberBounced: false,
      // 邮箱验证
      inputTeamAddEmail: false,
      // 搜索邮箱下拉框
      accordingEnd: false,
      // 用户头像
      memberIcoSeparate: '',
      // 用户名字
      memberNameSeparate: '',
      // 用户邮箱
      memberEmailSeparate: '',
      // 用户id
      memberIdSeparate: '',
      memberEmailAll: [],
      teamPersonnelList: [],
      // 设置&退出团队识别
      obtainStatebtn: false,
      addRepeatBtn: true,
      memberemailform: {
        email: ''
      },
      memberemailrules: {
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ]
      },
      teamDetailCon: {}
    }
  },
  mounted () {
    this._getTeamDetail()
    this.obtainState()
  },
  methods: {
    // tab切换
    toggleActive (val) {
      if (val === 1) {
        this.$router.push({ path: '/team/detail/member', query: { id: this.$route.query.id, role: this.$route.query.role } })
      } else {
        this.$router.push({ path: '/team/detail/count', query: { id: this.$route.query.id, role: this.$route.query.role } })
      }
    },
    // 设置&退出团队
    obtainState () {
      if (this.$route.query.role === '1' || this.$route.query.role === 1) {
        this.obtainStatebtn = true
      } else {
        this.obtainStatebtn = false
      }
    },
    // 关闭邀请成员
    closeBouncedFun () {
      this.$refs.memberemailform.resetFields()
      this.accordingEnd = false
      // this.memberemailform.email = ''
    },
    // 设置
    setUpTeamFun () {
      if (this.$route.query.role === '1' || this.$route.query.role === 1) {
        this.$router.push({ path: '/teamreset', query: { id: this.$route.query.id, role: this.$route.query.role } })
      }
    },
    // 退出团队
    exitTeamFun () {
      this.$confirm('确定退出该团队?', '消息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._quitTeam()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        })
      })
    },
    // 搜索用户邮箱
    addPersonnelFun () {
      if (this.inputTeamAddEmail) {
        if (this.userInfo.email === this.memberemailform.email) {
          this.$message({ message: '您不能添加自己为成员', showClose: true, type: 'error' })
          return false
        } else {
          this._getUserInfoByEmail()
        }
      }
    },
    // 发送邀请链接
    addMembersIDfun () {
      if (this.memberIdSeparate) {
        if (this.addRepeatBtn) {
          this.addRepeatBtn = false
          this._sendTeamMemberEmail()
        }
      }
    },
    // 获取团队详情
    _getTeamDetail () {
      let data = qs.stringify({
        teamId: this.$route.query.id
      })
      getTeamDetail(data).then(res => {
        if (res.message.code === 0) {
          this.teamDetailCon = res.data
        } else if (res.message.code === 20005) {
          this.$message({ message: '不是该团队成员', showClose: true, type: 'error' })
          this.$router.push({ path: '/index' })
        }
      })
    },
    // 退出团队
    _quitTeam () {
      let data = qs.stringify({
        teamId: this.$route.query.id
      })
      quitTeam(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '退出成功！', showClose: true, type: 'success' })
          this.reload()
          this.$router.push({ path: '/project/list' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 邮箱搜索
    _getUserInfoByEmail () {
      let data = qs.stringify({
        email: this.memberemailform.email,
        teamId: this.$route.query.id
      })
      getUserInfoByEmail(data).then(res => {
        if (res.message.code === 0) {
          this.memberNameSeparate = res.data.username
          this.memberEmailSeparate = res.data.email
          this.memberIdSeparate = res.data.id
          this.memberIcoSeparate = res.data.headImage
          this.accordingEnd = true
        } else if (res.message.code === 5) {
          this.$message({ message: '该用户不存在', showClose: true, type: 'error' })
        } else if (res.message.code === 20004) {
          this.$message({ message: '用户已加入团队', showClose: true, type: 'error' })
        } else if (res.message.code === -2) {
          this.$message({ message: '请输入邮箱', showClose: true, type: 'error' })
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 邀请成员
    _sendTeamMemberEmail () {
      let data = qs.stringify({
        emails: this.memberEmailSeparate,
        teamId: this.$route.query.id
      })
      sendTeamMemberEmail(data).then(res => {
        if (res.message.code === 0) {
          this.$message({ message: '成功发送团队邀请！', showClose: true, type: 'success' })
          this.memberemailform.email = ''
          this.accordingEnd = false
          this.addRepeatBtn = true
        } else if (res.message.code === 5) {
          this.$message({ message: '该用户不存在', showClose: true, type: 'success' })
        } else {
          this.$message({ message: res.msg, showClose: true, type: 'error' })
        }
      })
    }
  },
  computed: {
    activeTab: {
      get: function () {
        if (this.$route.path.indexOf('/team/detail/member') === 0) {
          return 1
        } else {
          return 2
        }
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  }
}
</script>

<style lang="stylus">
@import "../../common/stylus/detail_page_layer"
$fontcolor = #2D323B
.team-detail
  .header
    .action
      >span
        margin-right 0!important
  .icon-cfg
    width 16px
    margin-right 9px
    background url('../../common/image/icon/setting.png') 0 0 no-repeat
    background-size contain
  .icon-tcg
    width 16px
    margin-right 9px
    background url('../../common/image/quit-the-team.png') 0 0 no-repeat
    background-size contain
  .icon-member
    background url(../../common/image/icon/icon-team/icon-member.png) no-repeat center
    background-size 16px 16px
  .icon-count
    background url(../../common/image/icon/icon-team/icon-count.png) no-repeat center
    background-size 16px 16px
  .nav-item.active
    .icon-member
      background url(../../common/image/icon/icon-team/icon-member-active.png) no-repeat center
      background-size 16px 16px
    .icon-count
      background url(../../common/image/icon/icon-team/icon-count-active.png) no-repeat center
      background-size 16px 16px
  .icon-invite
    display inline-block
    width 19px
    height 12px
    margin-top 1px
    vertical-align top
    background url(../../common/image/icon/icon-team/invite.png) no-repeat center
    background-size 12px 100%
  .team-member-bounced-wrap
    min-height 196px
    .el-dialog__header
      padding 0
    .el-dialog__body
      padding 61px 93px
    .team-member-bounced
      h4
        font-size 16px
        line-height 22px
        color $fontcolor
        margin-bottom 12px
        font-weight bold
      .member-bounced-con
        position relative
        .member-bounced-con-box
          .el-form-item__content
            display flex
            justify-content space-between
            .member-bounced-email
              width 337px
            .member-bounced-search
              width 88px
          .el-form-item__content::before,.el-form-item__content::after
            content none
          .information-email-btn
            width 88px
            height 40px
            line-height 40px
            text-align center
            font-size 14px
            color #ffffff
            background #2196F3
            border-radius 4px
            cursor pointer
            &:hover
              opacity 0.8
        .el-form-item
          margin-bottom 0
        .information-email-back
          margin-top 2px
          .back-item
            display flex
            align-items center
            width 337px
            background #ffffff
            border 1px solid #dcdfe6
            border-radius 4px
            padding 25px 21px 13px 14px
            .back-item-portrait
              width 20px
              height 20px
              font-size 0
              margin-right 7px
              border-radius 50% 50%
              overflow hidden
              img
                width 100%
                height 100%
            .back-item-con
              width 250px
              font-size 12px
              color #666666
              line-height 17px
              word-break break-all
              word-wrap break-word
              overflow hidden
              text-overflow ellipsis
              display -webkit-box
              /*! autoprefixer: off */
              -webkit-box-orient vertical
              /* autoprefixer: on */
              -webkit-line-clamp 1
              span
                font-size 14px
                line-height 20px
                color $fontcolor
                margin-right 9px
            .back-item-add
              float right
              width 14px
              height 14px
              margin-top 2px
              font-size 0
              cursor pointer
              img
                display block
                width 100%
                height 100%
</style>
